<template>
  <el-dialog v-if="isBuyTypeEnergy"
    :visible.sync="vipGuide.show"
    @close="handleClose('close')"
    width="340px"
    top="0"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    :append-to-body="true"
    :modal="true"
    class="pop__vip_guide_dialog2"
  >
    <template slot="title">
      权益提示
      <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click="closeDialog"><i class="el-dialog__close el-icon el-icon-close"></i></button>
    </template>
    <div class="pop__vip_guide_text" v-html="vipGuide.title"></div>
    <div class="pop__vip_guide_footer">
      <el-button v-if="!userInfo.is_member"
        @click="handleToVipPage(undefined, 8006)"
        type="primary"
        class="btn__primary btn-vip-primary">
        <p class="btn__primary-title">{{ btnCfg.vip.title }}</p>
        <p class="btn__primary-sub" v-if="btnCfg.vip.content">{{ btnCfg.vip.content }}</p>
      </el-button>
      <el-button
        @click="toUserToken"
        type="primary"
        class="btn__primary btn-vip-primary1">
        <p class="btn__primary-title">{{ btnCfg.jgb.title }}</p>
        <p class="btn__primary-sub" v-if="btnCfg.jgb.content">{{ btnCfg.jgb .content }}</p>
      </el-button>
    </div>
  </el-dialog>
  <el-dialog v-else
    :visible.sync="vipGuide.show"
    @close="handleClose"
    width="310"
    :close-on-click-modal="false"
    :show-close="false"
    :append-to-body="true"
    :fullscreen="true"
    :modal="true"
    class="pop__vip_guide_dialog"
  >
    <div class="pop__vip_guide" >
      <h4 class="fs-16 fs-b" v-html="vipGuide.title"></h4>
      <p class="text__sub fs-14">解锁所有高级功能</p>
      <div class="rights__list fs-14">
        <p v-for="item in ListRights" :key="item">
          <svg-icon icon-class="vip-right" class="fs-20"></svg-icon>
          <span>{{ item }}</span>
        </p>
      </div>
      <div class="pop__vip_guide_footer mutiple">
        <el-button
          @click="handleToVipPage(undefined, 8006)"
          type="primary"
          class="btn__primary fs-16"
          v-if="isBuyTypeRight"
          >升级会员</el-button
        >
        <el-button
          @click="toUserToken"
          type="primary"
          class="btn__primary fs-16"
          v-else-if="isBuyTypeToken"
          >充值Token</el-button
        >
        <!-- <el-button
          v-if="user.restTokens === 0"
          class="btn__primary mb-20"
          type="primary"
          @click="handleToVipPage('package', 8005)"
          >购买加购包</el-button
        > -->
      </div>
      <svg-icon icon-class="close-btn1" class="close__btn fs-30" @click="handleClose"></svg-icon>
      <span class="vip__title" :style="`--vip-title-bg: url(${vipTitleBg})`"></span>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import sceneMg from '@/utils/scene-coupon.js'
export default {
  name: 'VipRightsGuide',
  inject: ['setHistoryMessage'], // 接收一个方法
  data () {
    return {
      ListRights: [
        'AI高级问答',
        'AI快速问答',
        '文件阅读总结', // 网页/文件阅读总结
        '文件阅读对话' // 网页/文件阅读对话
        // 'AI生成PPT',
        // 'PDF文件互转',
        // 'OCR文本识别'
      ],

      vipTitleBg: require('@/assets/vip-title.png')
    }
  },
  computed: {
    ...mapGetters(['vipGuide', 'userInfo', 'btnCfg']),
    isXz () {
      return process.env.VUE_APP_NAME === 'xz'
    },
    isBuyTypeRight () {
      return process.env.VUE_APP_BUY_TYPE === 'right'
    },
    isBuyTypeToken () {
      return process.env.VUE_APP_BUY_TYPE === 'token'
    },
    isBuyTypeEnergy () {
      return process.env.VUE_APP_BUY_TYPE === 'energy'
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    closeDialog () {
      if (this.isXz) {
        if (this.userInfo.is_member) {
          sceneMg.detectSeckilScence('close_noAI-VIP')
        } else {
          sceneMg.detectSeckilScence('close_noAI-notVIP')
        }
      }
      this.handleClose()
    },
    handleClose  () {
      this.$store.dispatch('system/setVipGuide', { status: false, title: '' })
    },
    // 跳转购买token
    toUserToken () {
      this.handleClose()
      const ReportID = this.userInfo.is_member ? 8508 : 8507
      this.$gotoUserToken({
        'xz': {
          stat_id: ReportID,
          callback: () => {
            this.$xz('HtmlClickReport', { ReportID })
            this.$xz('xz_set_stat_id', ReportID)
          }
        }
      })
      // if (this.isXz) {
      //
      //   this.$gotoMember({
      //     'xz': () => {
      //       this.$xz('HtmlClickReport', { ReportID })
      //       this.$xz('xz_set_stat_id', ReportID)
      //     }
      //   }, { action: 'jgb', stat_id: ReportID })
      // } else {
      //   this.$xz('xz_jump_buy_token')
      // }
    },
    handleToVipPage () {
      this.handleClose()
      this.$gotoMember({
        'xz': () => {
          const eid = this.vipGuide.eid
          if (eid) {
            this.$xz('HtmlClickReport', { ReportID: parseInt(eid, 10) })
            this.$xz('xz_set_stat_id', eid)
          }
        }
      })
    }
  }

}

</script>

<style lang="scss" scoped>
.pop__vip_guide_dialog {
  background: linear-gradient( 180deg, #403725 0%, #393D59 100%);
  top: auto;
  bottom: 100px;
  .pop__vip_guide {
    padding: 16px 10px;
    color: #FFFFFF;
  }
  .text__sub {
    padding: 12px 5px 2px;
  }
  h4 {
    line-height: 1.6;
    padding: 0 5px;
  }
  .rights__list {
    width: 250px;
    line-height: 1.6;
    border-radius: 10px;
    padding: 20px 20px;
    color: #F8DE9D;
    margin: 6px 0 20px;
    background: rgba(248,222,157,0.1);
    border: 1px dashed rgba(248, 222, 157, 0.3);
    p {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 10px;
    }
    .svg-icon {
      flex: 0 0 20px;
      align-self: flex-start;
      margin-top: 4px;
    }
  }

  .close__btn {
    position: absolute;
    bottom: -50px;
    left: 50%;
    margin-left: -15px;
    color: $color-white;
    cursor: pointer;
  }
  .vip__title {
    display: block;
    position: absolute;
    right: 14px;
    top: -74px;
    width: 220px;
    height: 140px;
    background: var(--vip-title-bg);
    background-size: contain;
    background-repeat: no-repeat;
  }

  .pop__vip_guide_footer {
    display: flex;
    justify-content: center;
    .btn__primary {
      display: block;
      margin: 0 auto;
      background: #7432ff;
      color: $color-white;
      width: 120px;
      height: 44px;
      border-radius: 53px;
      font-weight: bold;
      margin: 0;
      &:hover {
        background: rgba($color: #7432ff, $alpha: 0.7);
      }
    }
    button.btn__primary:nth-of-type(2) {
      background: linear-gradient(180deg, #ffe5b4 0%, #ffd583 100%);
      color: #7b4801;
      line-height: 1;
      &:hover {
        color: #7b4801;
        opacity: 0.7;
      }
    }
    &.mutiple {
      .btn__primary {
        border-radius: 8px;
        border: 0;
      }
    }
  }
}

.pop__vip_guide_dialog2 {
  background: transparent;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: unset;
  display: flex;
  align-items: center;
  justify-content: center;

  /deep/ .el-dialog{
    background: #34353B;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
    border-radius: 10px 10px 10px 10px;
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;

    .el-dialog__header {
      align-items: center;
      font-weight: bold;
      font-size: 14px;
      padding: 20px 24px 16px;
    }
    .el-dialog__close {
      color: rgba(255,255,255,0.7);
      cursor: pointer;
      &:hover{
        color: rgba(255, 255, 255, 1);
      }
    }
    .el-dialog__body {
      padding: 0 24px 24px;
    }
  }

  .pop__vip_guide_text {
    font-size: 14px;
    line-height: 22px;
    padding: 0 16px;
  }
  .pop__vip_guide_footer {
    margin-top: 16px;
    display: flex;
    justify-content: center;
    gap: 14px;
    .btn__primary {
      flex: 1;
      margin-left: 0;
      border-radius: 8px;
      min-height: 42px;
      padding: 5px;
      overflow: hidden;
    }
    .btn__primary-title {
      font-weight: bold;
      font-size: 14px;
      line-height: 18px;
    }
    .btn__primary-sub {
      font-size: 12px;
      font-weight: 400;
      margin-top: 2px;
      line-height: 16px;
    }
    .btn__primary-title,
    .btn__primary-sub {
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
